"use client"

import {
   AudioWaveform,
   BookOpen,
   Bot,
   Command,
   Frame,
   GalleryVerticalEnd,
   Map,
   PieChart,
   Settings2,
   SquareTerminal,
} from "lucide-react"
import type * as React from "react"

import { NavMain } from "~/registry/miami/blocks/sidebar-07/components/nav-main"
import { NavProjects } from "~/registry/miami/blocks/sidebar-07/components/nav-projects"
import { NavUser } from "~/registry/miami/blocks/sidebar-07/components/nav-user"
import { TeamSwitcher } from "~/registry/miami/blocks/sidebar-07/components/team-switcher"
import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
   SidebarHeader,
   SidebarRail,
} from "~/registry/miami/ui/sidebar"

// This is sample data.
const data = {
   user: {
      name: "nyxb",
      email: "m@example.com",
      avatar: "/avatars/nyxb.jpg",
   },
   teams: [
      {
         name: "Acme Inc",
         logo: GalleryVerticalEnd,
         plan: "Enterprise",
      },
      {
         name: "Acme Corp.",
         logo: AudioWaveform,
         plan: "Startup",
      },
      {
         name: "Evil Corp.",
         logo: Command,
         plan: "Free",
      },
   ],
   navMain: [
      {
         title: "Playground",
         url: "#",
         icon: SquareTerminal,
         isActive: true,
         items: [
            {
               title: "History",
               url: "#",
            },
            {
               title: "Starred",
               url: "#",
            },
            {
               title: "Settings",
               url: "#",
            },
         ],
      },
      {
         title: "Models",
         url: "#",
         icon: Bot,
         items: [
            {
               title: "Genesis",
               url: "#",
            },
            {
               title: "Explorer",
               url: "#",
            },
            {
               title: "Quantum",
               url: "#",
            },
         ],
      },
      {
         title: "Documentation",
         url: "#",
         icon: BookOpen,
         items: [
            {
               title: "Introduction",
               url: "#",
            },
            {
               title: "Get Started",
               url: "#",
            },
            {
               title: "Tutorials",
               url: "#",
            },
            {
               title: "Changelog",
               url: "#",
            },
         ],
      },
      {
         title: "Settings",
         url: "#",
         icon: Settings2,
         items: [
            {
               title: "General",
               url: "#",
            },
            {
               title: "Team",
               url: "#",
            },
            {
               title: "Billing",
               url: "#",
            },
            {
               title: "Limits",
               url: "#",
            },
         ],
      },
   ],
   projects: [
      {
         name: "Design Engineering",
         url: "#",
         icon: Frame,
      },
      {
         name: "Sales & Marketing",
         url: "#",
         icon: PieChart,
      },
      {
         name: "Travel",
         url: "#",
         icon: Map,
      },
   ],
}

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   return (
      <Sidebar collapsible="icon" {...props}>
         <SidebarHeader>
            <TeamSwitcher teams={data.teams} />
         </SidebarHeader>
         <SidebarContent>
            <NavMain items={data.navMain} />
            <NavProjects projects={data.projects} />
         </SidebarContent>
         <SidebarFooter>
            <NavUser user={data.user} />
         </SidebarFooter>
         <SidebarRail />
      </Sidebar>
   )
}
